<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../common/vue2/vue.js"></script>
    <script src="../../common/vue-router3.js"></script>
  </head>

  <body>
    <div id="app">
      <p>{{message}}</p>
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>

      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>


        <router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="/foo">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="foo">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 -->
<router-link :to="'foo'">Home</router-link>

<!-- 同上 -->
<router-link :to="{ path: 'foo' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'foo', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'foo', query: { plan: 'private' }}">Register</router-link>

      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>

    </div>

    <script type="text/javascript">
      const Foo = {template:'<div>foo</div>'}
      const Bar = {template:'<div>bar</div>'}

      const routes = [
        {path:'/foo',component:Foo},
        {path:'/bar',component:Bar}
      ]

      const router = new VueRouter({
        routes
      })

      var app = new Vue({
        router,
        el: "#app",
        data: {
          message: "Hello Vue!",
          counter: 0,
        },
        methods: {
          greet: function (event) {
            // `this` 在方法里指向当前 Vue 实例
            alert("Hello " + this.name + "!");
            // `event` 是原生 DOM 事件
            if (event) {
              alert(event.target.tagName);
            }
          },
        },
      });
    </script>
  </body>
</html>
